<template>
  <div class="three-buttons-group">
    <el-tooltip content="刷新" placement="top" effect="light" popper-class="my-popper">
      <img @click="refresh" src="@/assets/images/refush-icon.png" />
    </el-tooltip>
    <el-tooltip
      content="数据列"
      placement="top"
      effect="light"
      popper-class="my-popper"
      v-if="sortable"
    >
      <el-dropdown v-if="sortable">
        <img src="@/assets/images/data-column-icon.png" style="margin-left: 10px" />
        <template #dropdown>
          <draggable v-model="operationHeaders.data" item-key="label" @change="dragEnd">
            <template #item="{ element }">
              <el-row v-if="element.label">
                <el-col :span="16">
                  <el-button text size="small" style="color: white">{{
                    element.label
                  }}</el-button>
                </el-col>
                <el-col :span="8">
                  <el-switch size="small" v-model="element.isVisible"></el-switch>
                </el-col>
              </el-row>
            </template>
          </draggable>
        </template>
      </el-dropdown>
    </el-tooltip>
    <el-tooltip
      :content="langMsg?.export || '导出'"
      placement="top"
      effect="light"
      popper-class="my-popper"
      v-if="exportable"
    >
      <img
        @click="exportData"
        src="@/assets/images/export-icon.png"
        style="margin-left: 10px"
      />
    </el-tooltip>
    <com-pagination-table
      style="height: 1px; width: 1px; display: none"
      :id="filename"
      :data="tableData"
      :headers="headers"
      @refresh="download"
    />
  </div>
</template>
<script lang="ts" setup>
import draggable from "vuedraggable";
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
import { reactive, ref, watch } from "vue";
import ComPaginationTable from "@/components/ComPaginationTable.vue";
import { inject } from "vue";
const props = defineProps({
  headers: {
    type: <any>Array,
    default: () => [],
  },
  sortable: {
    type: Boolean,
    default: true,
  },
  exportable: {
    type: Boolean,
    default: true,
  },
});
const operationHeaders = reactive({
  data: props.headers,
});
const filterHeader: any = ref([]);
watch(
  () => props.headers,
  () => {
    const arr = props.headers.filter((item: any) => item.prop != "action");
    filterHeader.value = arr;
    operationHeaders.data = arr;
  }
);

const emit = defineEmits(["refresh", "exportData"]);
const langMsg: any = inject("langMsg");
defineExpose({ exportExcel, exportExcelDown });
function dragEnd() {
  refresh(operationHeaders.data);
}
function refresh(data: any) {
  emit("refresh", data);
}

function exportData() {
  emit("exportData");
}
function download() {
  if (filename.value) {
    exportExcelDown("#" + filename.value, filename.value);
  }
}
const tableData = ref([]);
const filename = ref(null);
function exportExcel(filenames: any, tableDatas: any) {
  tableDatas.forEach((item: any) => {
    for (const ele in item) {
      if (item[ele] + "" == "true" || item[ele] + "" == "false") {
        item[ele] = item[ele] ? "是" : "否";
      }
    }
  });
  tableData.value = tableDatas;
  filename.value = filenames;
}
function exportExcelDown(id: any, name: any) {
  filename.value = null; //防止多次触发
  //不加判断table表格导出会有两份数据，是因为fixed造成的，所以要筛选去重
  // 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
  const xlsxParam = { raw: true }; // 导出的内容只做解析，不进行格式转换，这样就可以解决时间格式乱码的问题
  const fix = document.querySelector(".el-table__fixed");
  let exportTable;
  if (fix) {
    exportTable = XLSX.utils.table_to_book(
      document.querySelector(id).removeChild(fix),
      xlsxParam
    );
    document.querySelector(id).appendChild(fix);
  } else {
    exportTable = XLSX.utils.table_to_book(document.querySelector(id), xlsxParam);
  }
  const exportTableOut = XLSX.write(exportTable, {
    bookType: "xlsx",
    bookSST: true,
    type: "array",
  });
  try {
    FileSaver.saveAs(
      new Blob([exportTableOut], {
        type: "application/octet-stream",
      }),
      name + ".xlsx"
    );
  } catch (e) {
    if (typeof console !== "undefined") {
      console.log(e, exportTableOut);
    }
  }
  return exportTableOut;
}
</script>
<script lang="ts">
export default {
  //组件名称
  name: "ThreeButtonsGroup",
};
</script>
<style lang="scss">
.three-buttons-group {
  display: flex;
  flex-wrap: nowrap;
  img {
    width: 20px;
    height: 20px;
  }

  .dropdown-item {
    width: 150px;
  }
}
</style>
